<!--
 * @docName: publicAccountAuthentication.vue
 * @Author: mwl
 * @Date: 2023/7/18
 * @LastEditors: zhongxiong
 * @LastEditTime: 11:17
-->
<template>
<div>
  <a-modal v-model="visibleAuthentication" title=" " :closable='false' :destroyOnClose='true' :maskClosable='false' :width="900" :height='200' :footer="false">
    <template>
      <div class="content">
        <a-row>
          <a-col :span="12">
            <a-form-model ref="form" :model="form" :rules="rules" class="password-retrieval-form">
            <div class="input-info">
              <!--            <h2 class="title"></h2>-->
              <h2 class="title title1">提交验证</h2>
              <a-form-model-item label="开户行" prop="bankName" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input v-model="form.bankName" has-feedback placeholder="请填写开户行" type="text" />
              </a-form-model-item>
              <a-form-model-item label="开户支行" prop="subBankName" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input v-model="form.subBankName"  placeholder="请填写开户支行" type="text" />
              </a-form-model-item>
              <a-form-model-item label="账号名称" prop="entName" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input v-model="form.entName"  placeholder="请填写账户名称" type="text" />
              </a-form-model-item>
              <a-form-model-item prop="cityName" :label-col="labelCol" :wrapper-col="wrapperCol">
                <span slot="label"><i style="color: #f5222d;margin-right: 4px;">*</i>所在地</span>
                <div class="fixed-box">
                  <a-select placeholder="请选择" v-model="province" style="width: 150px" @change="handleProvinceChange">
                    <a-select-option v-for="province in provinceData" :key="province">
                      {{ province }}
                    </a-select-option>
                  </a-select>
                  -
                  <a-select placeholder="请选择" v-model="secondCity" @select="cityCodeObtain" style="width: 150px">
                    <a-select-option v-for="city in cityData" :key="city.id">
                      {{ city.cityName }}
                    </a-select-option>
                  </a-select>
                </div>
              </a-form-model-item>
              <a-form-model-item label="银行账户" prop="bankAccountNo" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input v-model="form.bankAccountNo" placeholder="请填写银行账户" type="text" />
              </a-form-model-item>
              <a-form-model-item label="验证公户" :label-col="labelCol" :wrapper-col="wrapperCol">
                <span style="line-height: 20px;display: block;margin-bottom: 10px; color: #d86767;font-size: 12px;">点击开始验证，您的账户将收到一笔打款（每天最多五次），请在输入框中输入收到的金额，验证是否正确</span>
                <a-button type="primary" :disabled="disabledButton" @click="onStartVerification()">开始验证</a-button>
              </a-form-model-item>
            </div>
          </a-form-model>
          </a-col>
          <a-col :span="12">
            <a-form-model ref="form1" :model="form1" :rules="rule" class="password-retrieval-form">
            <div class="input-info">
              <h2 class="title title2">确认打款金额</h2>
              <a-form-model-item label="银行账户" required :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input v-model="form1.bankAccountNo" :disabled="disabled" placeholder="请填写银行账户" type="text" />
              </a-form-model-item>
              <a-form-model-item label="收款金额" prop="verifyAmount" :label-col="labelCol" :wrapper-col="wrapperCol">
                <div style="margin-bottom: 10px;">
                  <a-input-number style="min-width:200px;" :min="0" :formatter="limitTwoDigits" :parser="limitTwoDigits" placeholder="请填写收款金额" v-model="form1.verifyAmount" /> 元
                </div>
                <a-button type="primary" :label-col="labelCol" :wrapper-col="wrapperCol" :disabled="!disabledButton" @click="accountSubmit()">验证公户</a-button>
              </a-form-model-item>
            </div>
          </a-form-model>
          </a-col>
        </a-row>

        <!--    <a-divider />-->

      </div>
    </template>
  </a-modal>
</div>
</template>

<script>
import { getAreaCodelist, getAreaCodeListProvince } from '@api/bankAccount'
import { limitDigits,cloneObject,conversionBranch } from '@/utils/util'
import { getBusinessAccountPayAuth, getBusinessAccountVerify, getConfirmedChannelAccount } from '@api/register'
export default {
  name: 'publicAccountAuthentication',
  props:['visibleAuthentication','channelData'],
  data(){
    return {
      entId:'',
      channelType:null,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      form:{
        bankName: '',
        subBankName: '',
        entName:'',
        bankAccountNo: ''
      },
      provinceData:[],
      cityData:[],
      secondCity:'',
      province:'',
      rules: {
        bankName: [{ required: true, message: '请填写开户行', trigger: 'blur' }],
        subBankName: [{ required: true, message: '请填写开户支行', trigger: 'blur' }],
        entName:[{required: true, message: '请填写账号名称', trigger: 'blur'}],
        cityName: [
          { required: false, message: '请选择所在地', trigger: 'change' },
          { validator: this.validateSelect }
        ],
        bankAccountNo: [
          { required: true, message: '请填写银行账户', trigger: 'blur' },
          { validator: this.validateBankCard }
        ],
      },
      form1: {
        bankAccountNo: ''
      },
      rule: {
        bankAccountNo: [
          { required: true, message: '请填写银行账户', trigger: 'blur' },
          { validator: this.validateBankCard }
        ],
        verifyAmount: [{ required: true, message: '请填写收款金额', trigger: 'blur' }],
      },
      disabledButton: false,
      disabled: true
    }
  },
  watch: {
    channelData: {
      handler(val) {
        console.log(333, val)
        if (val.businessAccountVoList && val.businessAccountVoList.length>0) {
          let data= val.businessAccountVoList[0];
          this.form = data;
          this.province = this.form.provinceName;
          this.secondCity = this.form.cityName;
        }
      },
    },
  },
  created() {
    // this.accountQuery();
    this.getAreaCodeListProvinceFun();
  },
  methods: {
    skipEvent(){
      this.$router.push({
        path: '/registerProcess/submitSuccess'
      })
    },
    //校验为银行账户
    validateBankCard(rule,value,callback){
      let reg = /^([0-9]{7,30})$/;
      if (!value || reg.test(value)){
        callback();
      }else{
        callback("您的银行卡号格式不正确!");
      }
    },
    //
    validateSelect(rule,value,callback){
      if (this.province && this.secondCity){
        if (this.form.cityCode){
          callback();
        }else{
          callback("请重新选择所在地!");
        }
      }else{
        callback("所在地不能为空!");
      }
    },
    //获取省份列表
    getAreaCodeListProvinceFun(){
      let that = this;
      let params = {};
      getAreaCodeListProvince(params).then(res => {
        if (res.success) {
          // // 赋值表格数据
          that.provinceData = res.result;
          this.loading = false;
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //获取城市编号等信息
    getAreaCodelistFun(province){
      let that = this;
      let params = {};
      params.provinceName = province;
      getAreaCodelist(params).then(res => {
        if (res.success) {
          // 赋值表格数据
          that.cityData = res.result;
          that.secondCity = that.cityData[0].cityName;
          that.form.cityCode = that.cityData[0].cityCode;
          that.form.cityName = that.secondCity;
          this.loading = false;
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //点击城市事件
    handleProvinceChange(value) {
      this.form.provinceName = value;
      this.getAreaCodelistFun(value)
      // this.cities = cityData[value];
    },
    //城市选择事件
    cityCodeObtain(value,label){
      for(let item of this.cityData){
        if(item.id == value){
          this.form.cityCode = item.cityCode;
          this.form.cityName = item.cityName;
        }
      }

    },
    /**
     * 验证字段
     * @param arr
     * @param callback
     */
    validateFields(arr, callback){
      let promiseArray = []
      for(let item of arr){
        let p = new Promise((resolve, reject) => {
          this.$refs['form'].validateField(item, (err)=>{
            if(!err){
              resolve();
            }else{
              reject(err);
            }
          })
        });
        promiseArray.push(p)
      }
      Promise.all(promiseArray).then(()=>{
        callback()
      }).catch(err=>{
        callback(err)
      })
    },

    //开始校验
    onStartVerification(){
      this.$refs.form.validate(valid => {
        if (valid) {
          //执行
          let that = this;
          let params = {};
          params = that.form;
          params.agreeId=this.channelData.agreeInfoVo.id;
          params.masterId=this.channelData.agreeInfoVo.masterId;
          params.masterType=this.channelData.agreeInfoVo.masterType;
          getBusinessAccountPayAuth(params).then(res => {
            if (res.success) {
              this.disabledButton = true;
              this.form1.bankAccountNo = this.form.bankAccountNo;
            }else{
              this.$message.warning(res.message)
            }
          })
        }
      })

    },
    //提交公户信息
    accountSubmit(){
      // this.validateFields(['verifyAmount'], (Error) => {
      //   if (!Error) {
      this.$refs.form1.validate(valid => {
        if (valid) {
          let that = this;
          let params = {};
          let regA = cloneObject(that.form1);
          params.bankAccountNo = regA.bankAccountNo;
          params.verifyAmount = conversionBranch(regA.verifyAmount);
          params.agreeId=this.channelData.agreeInfoVo.id;
          params.masterId=this.channelData.agreeInfoVo.masterId;
          params.masterType=this.channelData.agreeInfoVo.masterType;
          getBusinessAccountVerify(params).then(res => {
            if (res.success) {
              // res.result ? this.$message.success("公户验证成功") : this.$message.warning("公户验证失败");
              if(res.result){
                this.$message.success("公户验证成功");
                this.$emit('visibleAuthenticationFun');
                // this.getConfirmedChannelAccountFun();
              }else{
                this.$message.warning("公户验证失败");
              }
              this.disabledButton = false;
            }else{
              this.$message.warning(res.message)
            }
          })
        }
      })
    },
    //限制两位小数
    limitTwoDigits(value) {
      return limitDigits(value)
    },
    //确认渠道账户信息
    getConfirmedChannelAccountFun(){
      let params ={};
      params.channelId = this.channelData.channelInfoVo.id;
      console.log(params.channelId)
      getConfirmedChannelAccount(params).then(res => {
        if (res.success) {
          this.$emit('visibleAuthenticationFun');
        }else{
          this.$message.warning(res.message)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.content{
  background: #fff;
  .title{
    //padding: 20px;
    box-sizing: border-box;
    height: 44px;
    line-height: 35px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: @primary-color;
    margin-bottom: 20px;
  }
  .title1{
    width: 161px;
    padding-left: 20px;
    background: url("../../assets/account/one.png") no-repeat;
    background-size: 100% 100%;
  }
  .title2{
    width: 196px;
    background: url("../../assets/account/two.png") no-repeat;
    background-size: 100% 100%;
    padding-left: 20px;
  }
  .fixed-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

/deep/.ant-tabs{
  padding: 1rem 2rem;
  width: 100%;
  box-sizing: border-box;
  background: #FFFFFF;
}
.icon{
  position: absolute;
  top: 0;
  right: 10px;
  color: #52c41a;
  font-size: 16px;
}

</style>
